<template>
  <div :class="{ 'is-compact': compact }" class="share-button">
    <!-- 主分享按钮 -->
    <button
      :class="[`size-${size}`, `variant-${variant}`]"
      :disabled="disabled"
      class="share-trigger"
      @click="toggleShareMenu"
    >
      <svg fill="none" viewBox="0 0 24 24">
        <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" stroke="currentColor" stroke-width="2"/>
        <polyline points="16,6 12,2 8,6" stroke="currentColor" stroke-width="2"/>
        <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="2" y2="15"/>
      </svg>
      <span v-if="showText">{{ shareText }}</span>
      <span v-if="showCount && totalShares > 0" class="share-count">{{ displayCount }}</span>
    </button>

    <!-- 分享选项菜单 -->
    <div
      v-if="showMenu"
      :class="{ 'menu-above': menuPosition === 'above' }"
      class="share-menu"
      @click.stop
    >
      <!-- 快速分享选项 -->
      <div class="quick-share-section">
        <div class="section-title">快速分享</div>
        <div class="quick-share-grid">
          <button
            v-for="option in quickShareOptions"
            :key="option.type"
            :class="option.type"
            :title="option.label"
            class="quick-share-btn"
            @click="handleQuickShare(option)"
          >
            <div class="share-icon" v-html="option.icon"></div>
            <span class="share-label">{{ option.label }}</span>
          </button>
        </div>
      </div>

      <!-- 链接分享 -->
      <div class="link-share-section">
        <div class="section-title">链接分享</div>
        <div class="link-share-container">
          <div class="link-input-wrapper">
            <input
              ref="linkInputRef"
              :value="props.shareUrl"
              class="share-link-input"
              readonly
              type="text"
              @click="selectLinkText"
            />
            <button
              :class="{ 'copied': linkCopied }"
              class="copy-link-btn"
              @click="copyShareLink"
            >
              <svg v-if="linkCopied" fill="none" viewBox="0 0 24 24">
                <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2"/>
              </svg>
              <svg v-else fill="none" viewBox="0 0 24 24">
                <rect height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="13" x="9" y="9"/>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
              </svg>
              {{ linkCopied ? '已复制' : '复制' }}
            </button>
          </div>

          <!-- 分享设置选项 -->
          <div v-if="showAdvanced" class="share-options">
            <div class="option-group">
              <label class="option-item">
                <input v-model="shareSettings.allowDownload" type="checkbox" />
                <span class="checkbox-custom"></span>
                允许下载原文件
              </label>

              <label class="option-item">
                <input v-model="shareSettings.addWatermark" type="checkbox" />
                <span class="checkbox-custom"></span>
                添加水印保护
              </label>

              <label class="option-item">
                <input v-model="shareSettings.requirePassword" type="checkbox" />
                <span class="checkbox-custom"></span>
                密码保护
              </label>
            </div>

            <!-- 密码设置 -->
            <div v-if="shareSettings.requirePassword" class="password-section">
              <input
                v-model="shareSettings.password"
                class="password-input"
                maxlength="20"
                placeholder="设置访问密码"
                type="text"
              />
            </div>

            <!-- 有效期设置 -->
            <div class="expiry-section">
              <label class="expiry-label">分享有效期：</label>
              <select v-model="shareSettings.expiry" class="expiry-select">
                <option value="">永久有效</option>
                <option value="1h">1小时</option>
                <option value="1d">1天</option>
                <option value="7d">7天</option>
                <option value="30d">30天</option>
                <option value="custom">自定义</option>
              </select>

              <input
                v-if="shareSettings.expiry === 'custom'"
                v-model="shareSettings.customExpiry"
                class="custom-expiry-input"
                type="datetime-local"
              />
            </div>

            <!-- 生成分享链接 -->
            <button
              :disabled="generatingLink"
              class="generate-link-btn"
              @click="generateCustomShareLink"
            >
              <svg v-if="generatingLink" class="loading-spinner" fill="none" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              </svg>
              <svg v-else fill="none" viewBox="0 0 24 24">
                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" stroke-width="2"/>
                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2"/>
              </svg>
              {{ generatingLink ? '生成中...' : '生成专属链接' }}
            </button>
          </div>

          <!-- 高级选项切换 -->
          <button
            class="toggle-advanced"
            @click="showAdvanced = !showAdvanced"
          >
            <svg
              :class="{ 'rotated': showAdvanced }"
              fill="none"
              viewBox="0 0 24 24"
            >
              <polyline points="6,9 12,15 18,9" stroke="currentColor" stroke-width="2"/>
            </svg>
            {{ showAdvanced ? '收起' : '更多选项' }}
          </button>
        </div>
      </div>

      <!-- 二维码分享 -->
      <div v-if="showQrCode" class="qr-share-section">
        <div class="section-title">二维码分享</div>
        <div class="qr-code-container">
          <canvas
            ref="qrCanvasRef"
            class="qr-code-canvas"
            height="150"
            width="150"
          ></canvas>
          <div class="qr-actions">
            <button class="qr-action-btn" @click="downloadQrCode">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
                <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
                <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="15" y2="3"/>
              </svg>
              下载
            </button>
            <button class="qr-action-btn" @click="printQrCode">
              <svg fill="none" viewBox="0 0 24 24">
                <polyline points="6,9 6,2 18,2 18,9" stroke="currentColor" stroke-width="2"/>
                <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" stroke="currentColor" stroke-width="2"/>
                <rect height="8" stroke="currentColor" stroke-width="2" width="12" x="6" y="14"/>
              </svg>
              打印
            </button>
          </div>
        </div>
      </div>

      <!-- 分享统计 -->
      <div v-if="showStats && shareStats" class="share-stats-section">
        <div class="section-title">分享统计</div>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">{{ shareStats.totalShares }}</div>
            <div class="stat-label">总分享</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ shareStats.totalViews }}</div>
            <div class="stat-label">总浏览</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ shareStats.todayViews }}</div>
            <div class="stat-label">今日浏览</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 背景遮罩 -->
    <div v-if="showMenu" class="share-backdrop" @click="closeShareMenu"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
import { Notify } from '@opentiny/vue'

// Props
interface Props {
  shareUrl?: string
  title?: string
  description?: string
  image?: string
  size?: 'small' | 'medium' | 'large'
  variant?: 'default' | 'filled' | 'outline' | 'text'
  compact?: boolean
  disabled?: boolean
  showText?: boolean
  showCount?: boolean
  showQrCode?: boolean
  showStats?: boolean
  totalShares?: number
}

const props = withDefaults(defineProps<Props>(), {
  shareUrl: '',
  title: '分享内容',
  description: '',
  image: '',
  size: 'medium',
  variant: 'default',
  compact: false,
  disabled: false,
  showText: true,
  showCount: true,
  showQrCode: true,
  showStats: false,
  totalShares: 0
})

// Emits
const emit = defineEmits<{
  share: [type: string, options?: any]
  linkGenerated: [url: string, options: any]
}>()

// 响应式数据
const showMenu = ref(false)
const showAdvanced = ref(false)
const linkCopied = ref(false)
const generatingLink = ref(false)
const menuPosition = ref<'below' | 'above'>('below')

const linkInputRef = ref<HTMLInputElement>()
const qrCanvasRef = ref<HTMLCanvasElement>()

// 分享设置
const shareSettings = ref({
  allowDownload: true,
  addWatermark: false,
  requirePassword: false,
  password: '',
  expiry: '',
  customExpiry: ''
})

// 分享统计（模拟数据）
const shareStats = ref({
  totalShares: 156,
  totalViews: 1234,
  todayViews: 45
})

// 计算属性
const shareText = computed(() => {
  return props.compact ? '分享' : '分享'
})

const displayCount = computed(() => {
  const count = props.totalShares
  if (count === 0) return ''
  if (count < 1000) return count.toString()
  if (count < 10000) return (count / 1000).toFixed(1) + 'k'
  return (count / 10000).toFixed(1) + 'w'
})

// 快速分享选项
const quickShareOptions = computed(() => [
  {
    type: 'wechat',
    label: '微信',
    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55l-.568 3.187 3.32-1.996c1.039.2 2.126.317 3.237.317.319 0 .637-.016.948-.05-.257-.808-.404-1.665-.404-2.563 0-4.906 4.267-8.896 9.531-8.896.387 0 .768.027 1.141.08C19.604 3.773 17.658 2.188 8.691 2.188zm-2.46 5.695c.586 0 1.061-.475 1.061-1.061s-.475-1.061-1.061-1.061-1.061.475-1.061 1.061.475 1.061 1.061 1.061zm5.842 0c.586 0 1.061-.475 1.061-1.061s-.475-1.061-1.061-1.061-1.061.475-1.061 1.061.475 1.061 1.061 1.061z"/><path d="M24 14.388c0-3.227-2.734-5.872-6.104-5.872-3.37 0-6.104 2.645-6.104 5.872s2.734 5.872 6.104 5.872c.789 0 1.543-.123 2.238-.35l2.394 1.615-.789-2.478C22.826 17.701 24 16.126 24 14.388zm-8.717-1.061c-.394 0-.715-.32-.715-.715s.32-.715.715-.715.715.32.715.715-.32.715-.715.715zm3.677 0c-.394 0-.715-.32-.715-.715s.32-.715.715-.715.715.32.715.715-.32.715-.715.715z"/></svg>',
    color: '#07C160'
  },
  {
    type: 'qq',
    label: 'QQ',
    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 1.964.476 3.816 1.317 5.448l-.791 2.377 2.438-.791c1.632.842 3.484 1.318 5.448 1.318 6.621 0 11.988-5.367 11.988-11.987C20.429 5.367 15.062.004 12.017.004zm.472 17.573c-3.097 0-5.61-2.513-5.61-5.61s2.513-5.61 5.61-5.61 5.61 2.513 5.61 5.61-2.513 5.61-5.61 5.61z"/></svg>',
    color: '#12B7F5'
  },
  {
    type: 'weibo',
    label: '微博',
    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.98 14.22c-1.57.08-2.93-.66-3.04-1.65-.11-.99 1.05-1.93 2.62-2.01 1.57-.08 2.93.66 3.04 1.65.11.99-1.05 1.93-2.62 2.01zm7.47-1.54c-.26-.17-.15-.64.22-1.17.64-.9.71-1.68.15-2.11-.93-.72-3.46-.07-3.46-.07s-.75-.31-.54-.9c.41-1.15.35-2.11-.23-2.67-1.31-1.26-4.8.04-7.78 2.9C3.85 11.4 2.38 14.09 2.38 16.32c0 4.15 5.31 6.68 10.51 6.68 6.82 0 11.36-3.96 11.36-7.11 0-1.9-1.6-2.98-3.8-2.21zm-5.91 6.57c-4.07.4-7.57-1.44-7.82-4.11-.25-2.67 2.79-5.18 6.85-5.59 4.07-.4 7.57 1.44 7.82 4.11.25 2.67-2.79 5.18-6.85 5.59z"/></svg>',
    color: '#E6162D'
  },
  {
    type: 'douyin',
    label: '抖音',
    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6.066 11.178c-.471.24-.998.369-1.555.369-.667 0-1.292-.186-1.847-.519v5.162c0 2.69-2.177 4.867-4.867 4.867S5.03 18.879 5.03 16.19s2.177-4.867 4.867-4.867c.321 0 .631.031.93.09v2.49c-.299-.182-.65-.29-1.026-.29-1.14 0-2.064.924-2.064 2.064s.924 2.064 2.064 2.064 2.064-.924 2.064-2.064V3.097h2.803c.151 1.407.812 2.679 1.832 3.544.675.572 1.519.913 2.444.913.331 0 .652-.051.962-.146v2.77z"/></svg>',
    color: '#FF0050'
  },
  {
    type: 'link',
    label: '链接',
    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>',
    color: '#6B7280'
  },
  {
    type: 'email',
    label: '邮件',
    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>',
    color: '#EA4335'
  }
])

// 方法
const toggleShareMenu = () => {
  if (props.disabled) return

  showMenu.value = !showMenu.value

  if (showMenu.value) {
    nextTick(() => {
      calculateMenuPosition()
      generateQrCode()
      if (!props.shareUrl) {
        generateDefaultShareLink()
      }
    })
  } else {
    showAdvanced.value = false
  }
}

const closeShareMenu = () => {
  showMenu.value = false
  showAdvanced.value = false
}

const calculateMenuPosition = () => {
  // 简单的位置计算，实际应用中可以更复杂
  const triggerElement = document.querySelector('.share-trigger') as HTMLElement
  if (triggerElement) {
    const rect = triggerElement.getBoundingClientRect()
    const windowHeight = window.innerHeight

    // 如果按钮在屏幕下半部分，菜单显示在上方
    menuPosition.value = rect.bottom > windowHeight / 2 ? 'above' : 'below'
  }
}

const handleQuickShare = (option: any) => {
  const shareData = {
    title: props.title,
    description: props.description,
    url: props.shareUrl || window.location.href,
    image: props.image
  }

  switch (option.type) {
    case 'wechat':
      // 微信分享逻辑
      if (navigator.share) {
        navigator.share(shareData)
      } else {
        copyShareLink()
        Notify({
          type: 'info',
          message: '链接已复制，请在微信中分享',
          position: 'top-right'
        })
      }
      break

    case 'qq':
      // QQ分享
      const qqUrl = `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(shareData.url)}&title=${encodeURIComponent(shareData.title)}&desc=${encodeURIComponent(shareData.description)}`
      window.open(qqUrl, '_blank')
      break

    case 'weibo':
      // 微博分享
      const weiboUrl = `https://service.weibo.com/share/share.php?url=${encodeURIComponent(shareData.url)}&title=${encodeURIComponent(shareData.title)}&pic=${encodeURIComponent(shareData.image || '')}`
      window.open(weiboUrl, '_blank')
      break

    case 'douyin':
      // 抖音分享
      copyShareLink()
      Notify({
        type: 'info',
        message: '链接已复制，请在抖音中分享',
        position: 'top-right'
      })
      break

    case 'link':
      copyShareLink()
      break

    case 'email':
      // 邮件分享
      const emailUrl = `mailto:?subject=${encodeURIComponent(shareData.title)}&body=${encodeURIComponent(`${shareData.description}\n\n查看详情：${shareData.url}`)}`
      window.location.href = emailUrl
      break
  }

  emit('share', option.type, shareData)
  closeShareMenu()
}

const selectLinkText = () => {
  if (linkInputRef.value) {
    linkInputRef.value.select()
    linkInputRef.value.setSelectionRange(0, 99999) // For mobile devices
  }
}

const copyShareLink = async () => {
  try {
    const url = props.shareUrl || window.location.href
    await navigator.clipboard.writeText(url)

    linkCopied.value = true
    setTimeout(() => {
      linkCopied.value = false
    }, 2000)

    Notify({
      type: 'success',
      message: '链接已复制到剪贴板',
      position: 'top-right'
    })

  } catch (error) {
    console.error('Copy failed:', error)

    // 备用复制方法
    if (linkInputRef.value) {
      linkInputRef.value.select()
      document.execCommand('copy')

      Notify({
        type: 'success',
        message: '链接已复制',
        position: 'top-right'
      })
    }
  }
}

const generateDefaultShareLink = () => {
  // 生成默认分享链接
  const currentUrl = window.location.href
  // 这里可以添加分享参数
  return currentUrl + '?shared=true'
}

const generateCustomShareLink = async () => {
  if (generatingLink.value) return

  try {
    generatingLink.value = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    const customUrl = `${window.location.origin}/share/${Date.now()}`

    emit('linkGenerated', customUrl, shareSettings.value)

    Notify({
      type: 'success',
      message: '专属分享链接生成成功',
      position: 'top-right'
    })

  } catch (error) {
    console.error('Generate link failed:', error)
    Notify({
      type: 'error',
      message: '生成链接失败，请重试',
      position: 'top-right'
    })
  } finally {
    generatingLink.value = false
  }
}

const generateQrCode = () => {
  if (!props.showQrCode || !qrCanvasRef.value) return

  const canvas = qrCanvasRef.value
  const ctx = canvas.getContext('2d')

  if (!ctx) return

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)

  // 简单的二维码占位图
  ctx.fillStyle = '#000000'

  // 绘制二维码图案（这里是简化版，实际应使用QR库）
  const size = 10
  for (let i = 0; i < 15; i++) {
    for (let j = 0; j < 15; j++) {
      if (Math.random() > 0.5) {
        ctx.fillRect(i * size, j * size, size, size)
      }
    }
  }

  // 在实际项目中，应该使用 qrcode 库：
  // import QRCode from 'qrcode'
  // QRCode.toCanvas(canvas, props.shareUrl || window.location.href)
}

const downloadQrCode = () => {
  if (!qrCanvasRef.value) return

  const canvas = qrCanvasRef.value
  const link = document.createElement('a')
  link.download = 'qrcode.png'
  link.href = canvas.toDataURL()
  link.click()
}

const printQrCode = () => {
  if (!qrCanvasRef.value) return

  const canvas = qrCanvasRef.value
  const dataUrl = canvas.toDataURL()

  const printWindow = window.open('', '_blank')
  if (printWindow) {
    printWindow.document.write(`
      <html>
        <head><title>二维码打印</title></head>
        <body style="display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;">
          <div style="text-align: center;">
            <h2>${props.title}</h2>
            <img src="${dataUrl}" style="max-width: 300px; max-height: 300px;" />
            <p>扫码访问</p>
          </div>
        </body>
      </html>
    `)
    printWindow.document.close()
    printWindow.focus()
    printWindow.print()
    printWindow.close()
  }
}

// 生命周期
onMounted(() => {
  // 点击外部关闭菜单
  document.addEventListener('click', (e) => {
    if (!e.target || !(e.target as Element).closest('.share-button')) {
      closeShareMenu()
    }
  })
})

onUnmounted(() => {
  document.removeEventListener('click', closeShareMenu)
})
</script>

<style lang="scss" scoped>
.share-button {
  position: relative;
  display: inline-block;

  &.is-compact {
    .share-trigger {
      padding: 0.375rem 0.75rem;

      svg {
        width: 14px;
        height: 14px;
      }
    }
  }

  .share-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    svg {
      transition: transform 0.2s ease;
    }

    &:hover:not(:disabled) svg {
      transform: translateY(-1px);
    }

    // 尺寸变体
    &.size-small {
      padding: 0.375rem 0.75rem;
      font-size: 0.75rem;

      svg {
        width: 14px;
        height: 14px;
      }
    }

    &.size-medium {
      padding: 0.5rem 1rem;
      font-size: 0.875rem;

      svg {
        width: 16px;
        height: 16px;
      }
    }

    &.size-large {
      padding: 0.75rem 1.5rem;
      font-size: 1rem;

      svg {
        width: 18px;
        height: 18px;
      }
    }

    // 样式变体
    &.variant-default {
      background: #f3f4f6;
      color: #6b7280;

      &:hover:not(:disabled) {
        background: #e5e7eb;
        color: #374151;
      }
    }

    &.variant-filled {
      background: #3b82f6;
      color: white;

      &:hover:not(:disabled) {
        background: #2563eb;
      }
    }

    &.variant-outline {
      border: 1px solid #d1d5db;
      background: transparent;
      color: #6b7280;

      &:hover:not(:disabled) {
        border-color: #9ca3af;
        background: #f9fafb;
      }
    }

    &.variant-text {
      background: transparent;
      color: #6b7280;

      &:hover:not(:disabled) {
        background: #f3f4f6;
        color: #374151;
      }
    }

    .share-count {
      margin-left: 0.25rem;
      font-size: 0.8em;
      opacity: 0.8;
    }
  }

  .share-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 50;
    min-width: 320px;
    max-width: 400px;
    overflow: hidden;
    animation: slideDown 0.2s ease-out;

    &.menu-above {
      top: auto;
      bottom: calc(100% + 0.5rem);
      animation: slideUp 0.2s ease-out;
    }

    .section-title {
      font-size: 0.8rem;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin-bottom: 0.75rem;
    }

    // 快速分享区域
    .quick-share-section {
      padding: 1.5rem;
      border-bottom: 1px solid #f1f5f9;

      .quick-share-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;

        .quick-share-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.5rem;
          padding: 1rem 0.5rem;
          border: none;
          background: #f8fafc;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover {
            background: #f1f5f9;
            transform: translateY(-1px);
          }

          .share-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;

            :deep(svg) {
              width: 100%;
              height: 100%;
            }
          }

          &.wechat .share-icon { color: #07C160; }
          &.qq .share-icon { color: #12B7F5; }
          &.weibo .share-icon { color: #E6162D; }
          &.douyin .share-icon { color: #FF0050; }
          &.link .share-icon { color: #6B7280; }
          &.email .share-icon { color: #EA4335; }

          .share-label {
            font-size: 0.75rem;
            color: #6b7280;
            font-weight: 500;
          }
        }
      }
    }

    // 链接分享区域
    .link-share-section {
      padding: 1.5rem;
      border-bottom: 1px solid #f1f5f9;

      .link-share-container {
        .link-input-wrapper {
          display: flex;
          gap: 0.5rem;
          margin-bottom: 1rem;

          .share-link-input {
            flex: 1;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            background: #f9fafb;
            font-size: 0.875rem;
            color: #374151;

            &:focus {
              outline: none;
              border-color: #3b82f6;
              background: white;
            }
          }

          .copy-link-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
            white-space: nowrap;

            &:hover {
              background: #2563eb;
            }

            &.copied {
              background: #16a34a;
            }

            svg {
              width: 16px;
              height: 16px;
            }
          }
        }

        .share-options {
          .option-group {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-bottom: 1rem;

            .option-item {
              display: flex;
              align-items: center;
              gap: 0.75rem;
              cursor: pointer;
              font-size: 0.875rem;
              color: #374151;

              input[type="checkbox"] {
                display: none;
              }

              .checkbox-custom {
                width: 16px;
                height: 16px;
                border: 2px solid #d1d5db;
                border-radius: 3px;
                position: relative;
                transition: all 0.2s ease;

                &::after {
                  content: '✓';
                  position: absolute;
                  inset: 0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: white;
                  font-size: 10px;
                  font-weight: bold;
                  opacity: 0;
                  transition: opacity 0.2s ease;
                }
              }

              input:checked + .checkbox-custom {
                background: #3b82f6;
                border-color: #3b82f6;

                &::after {
                  opacity: 1;
                }
              }
            }
          }

          .password-section {
            margin-bottom: 1rem;

            .password-input {
              width: 100%;
              padding: 0.75rem;
              border: 1px solid #d1d5db;
              border-radius: 8px;
              font-size: 0.875rem;

              &:focus {
                outline: none;
                border-color: #3b82f6;
              }
            }
          }

          .expiry-section {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;

            .expiry-label {
              color: #6b7280;
              white-space: nowrap;
            }

            .expiry-select {
              padding: 0.5rem;
              border: 1px solid #d1d5db;
              border-radius: 6px;
              background: white;
              font-size: 0.875rem;

              &:focus {
                outline: none;
                border-color: #3b82f6;
              }
            }

            .custom-expiry-input {
              flex: 1;
              padding: 0.5rem;
              border: 1px solid #d1d5db;
              border-radius: 6px;
              font-size: 0.875rem;

              &:focus {
                outline: none;
                border-color: #3b82f6;
              }
            }
          }

          .generate-link-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.75rem;
            background: #16a34a;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.2s ease;

            &:hover:not(:disabled) {
              background: #15803d;
            }

            &:disabled {
              opacity: 0.7;
              cursor: not-allowed;
            }

            svg {
              width: 16px;
              height: 16px;
            }

            .loading-spinner {
              animation: spin 1s linear infinite;
            }
          }
        }

        .toggle-advanced {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          width: 100%;
          padding: 0.5rem;
          background: none;
          border: none;
          color: #6b7280;
          cursor: pointer;
          font-size: 0.875rem;
          border-top: 1px solid #f1f5f9;
          margin-top: 1rem;

          &:hover {
            color: #374151;
          }

          svg {
            width: 16px;
            height: 16px;
            transition: transform 0.2s ease;

            &.rotated {
              transform: rotate(180deg);
            }
          }
        }
      }
    }

    // 二维码区域
    .qr-share-section {
      padding: 1.5rem;
      border-bottom: 1px solid #f1f5f9;
      text-align: center;

      .qr-code-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;

        .qr-code-canvas {
          border: 1px solid #e5e7eb;
          border-radius: 8px;
        }

        .qr-actions {
          display: flex;
          gap: 0.75rem;

          .qr-action-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border: 1px solid #d1d5db;
            background: white;
            color: #6b7280;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.2s ease;

            &:hover {
              background: #f9fafb;
              border-color: #9ca3af;
            }

            svg {
              width: 14px;
              height: 14px;
            }
          }
        }
      }
    }

    // 统计区域
    .share-stats-section {
      padding: 1.5rem;

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;

        .stat-item {
          text-align: center;

          .stat-number {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.25rem;
          }

          .stat-label {
            font-size: 0.75rem;
            color: #6b7280;
          }
        }
      }
    }
  }

  .share-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 40;
  }
}

// 动画
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 768px) {
  .share-button {
    .share-menu {
      position: fixed;
      top: auto !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      border-radius: 12px 12px 0 0;
      max-height: 80vh;
      overflow-y: auto;
      animation: slideUpMobile 0.3s ease-out;

      .quick-share-section .quick-share-grid {
        grid-template-columns: repeat(6, 1fr);

        .quick-share-btn {
          padding: 0.75rem 0.5rem;

          .share-label {
            font-size: 0.7rem;
          }
        }
      }

      .link-share-section .link-share-container .link-input-wrapper {
        flex-direction: column;

        .copy-link-btn {
          justify-content: center;
        }
      }

      .share-stats-section .stats-grid {
        gap: 0.75rem;

        .stat-item .stat-number {
          font-size: 1.125rem;
        }
      }
    }
  }
}

@keyframes slideUpMobile {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 暗色模式
@media (prefers-color-scheme: dark) {
  .share-button {
    .share-trigger {
      &.variant-default {
        background: #374151;
        color: #9ca3af;

        &:hover:not(:disabled) {
          background: #4b5563;
          color: #d1d5db;
        }
      }

      &.variant-outline {
        border-color: #4b5563;
        color: #9ca3af;

        &:hover:not(:disabled) {
          border-color: #6b7280;
          background: rgba(255, 255, 255, 0.05);
        }
      }
    }

    .share-menu {
      background: #1f2937;
      border-color: #374151;

      .section-title {
        color: #9ca3af;
      }

      .quick-share-section {
        border-bottom-color: #374151;

        .quick-share-btn {
          background: #374151;
          color: #d1d5db;

          &:hover {
            background: #4b5563;
          }
        }
      }

      .link-share-section,
      .qr-share-section,
      .share-stats-section {
        border-bottom-color: #374151;
      }

      .share-link-input {
        background: #374151;
        border-color: #4b5563;
        color: #d1d5db;

        &:focus {
          background: #4b5563;
        }
      }

      .stat-item .stat-number {
        color: #f9fafb;
      }
    }
  }
}
</style>
